<template>
  <div class="helpCenter-box">
    <Head :title= "Title"></Head>
    <Search></Search>
    <div class="helpCenter-txt">
      <div class="tit">
        <img src="../../assets/images/icon-user.png" alt="">
        <p>开户相关</p>
        <span>更多></span>
      </div>
      <ul class="help-list">
        <li>
          <p>怎么开通真实账户？</p>
          <i></i>
        </li>
        <li>
          <p>开户需要哪些证件资料？</p>
          <i></i>
        </li>
        <li>
          <p>开通账户需要多长时间？</p>
          <i></i>
        </li>
      </ul>
    </div>

    <div class="helpCenter-txt">
      <div class="tit">
        <img src="../../assets/images/icon-zijin.png" alt="">
        <p>资金相关</p>
        <span>更多></span>
      </div>
      <ul class="help-list">
        <li>
          <p>账户资金是否安全？</p>
          <i></i>
        </li>
        <li>
          <p>入金流程指引</p>
          <i></i>
        </li>
        <li>
          <p>出金流程指引</p>
          <i></i>
        </li>
      </ul>
    </div>

    <div class="helpCenter-txt">
      <div class="tit">
        <img src="../../assets/images/icon-jiaoyi.png" alt="">
        <p>交易相关</p>
        <span>更多></span>
      </div>
      <ul class="help-list">
        <li>
          <p>什么是跟投交易？</p>
          <i></i>
        </li>
        <li>
          <p>如何进行高手跟单？</p>
          <i></i>
        </li>
        <li>
          <p>每天什么时间段可以交易？</p>
          <i></i>
        </li>
      </ul>
    </div>

    <div class="helpCenter-txt">
      <div class="tit">
        <img src="../../assets/images/icon-tangying.png" alt="">
        <p>躺赢相关</p>
        <span>更多></span>
      </div>
      <ul class="help-list">
        <li>
          <p>躺盈是什么？提供哪些服务？</p>
          <i></i>
        </li>
        <li>
          <p>躺盈支持哪些金融产品的交易？</p>
          <i></i>
        </li>
        <li>
          <p>躺盈合作的经纪商有哪些？</p>
          <i></i>
        </li>
      </ul>
    </div>

    <div class="help-footer">
      <p><i class="icon kefu"></i><i class="font">在线客服</i></p>
      <p><i class="icon call"></i><i class="font">电话咨询</i></p>
    </div>
  </div>
</template>

<script>
  import { Ajax } from "@/mixins";
  import Head from '../../components/header/head.vue'
  import Search from '../../components/search/search.vue'

  export default {
    /*naem: "rewardPop",
     mixins: [Ajax],*/
    components: {
      Head,
      Search
    },
    props: {
      // 必填，是否显示弹框

    },
    data() {
      return {
        Title: '帮助中心',
      };
    },
    watch: {

    },
    methods: {

    }
  };
</script>

<style scoped>
  .helpCenter-box{
    padding-bottom: 1.8rem;
    background: #eee;
  }

  .helpCenter-txt{
    margin: 0.3rem auto 0 auto;
    background: #fff;
  }
  .helpCenter-txt .tit{
    position: relative;
    padding: 0.73rem 0.54rem;
    display: flex;
  }
  .helpCenter-txt .tit img{
    margin-right: 0.44rem;
    width: 0.9rem;
    height: 0.65rem;
  }
  .helpCenter-txt .tit p{
    font-size: 0.48rem;
    color: #8e79c0;
  }
  .helpCenter-txt .tit span{
    position: absolute;
    right: 0.54rem;
    font-size: 0.36rem;
    color: #999;
  }

  .help-list{
    padding: 0 0.54rem;
  }
  .help-list li{
    position: relative;
    height: 1.32rem;
    line-height: 1.32rem;
  }
  .help-list li>p{
    font-size: 0.42rem;
    color: #666;
  }
  .help-list li>i{
    position: absolute;
    top: 0;
    right: 0;
    display: block;
    width: 1.32rem;
    height: 1.32rem;
    background: url("../../assets/images/icon-right.png") no-repeat center/18% 34%;
  }
  .help-footer{
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    font-size: 0.48rem;
    color: #fff;
    background: #8e79c0;
  }
  .help-footer>p{
    width: 50%;
    height: 1.8rem;
    text-align: center;
  }
  .help-footer>p>i{
    display: inline-block;
    height: 1.8rem;
    line-height: 1.8rem;
  }
  .help-footer>p>i.font{
    position: relative;
    top: -0.64rem;
  }
  .help-footer>p>i.icon{
    width: 1.8rem;
  }
  .help-footer>p>i.kefu{
    background: url("../../assets/images/icon-kefu.png") no-repeat center/39% 44%;
  }
  .help-footer>p>i.call{
    background: url("../../assets/images/icon-call.png") no-repeat center/45% 46%;
  }

</style>
